<template>
  <!-- to: 用来设置跳转路径 -->
  <!-- 开发中如果直接给自定义组件添加class和style属性，这些属性会自动绑定给自定义组件中最外层的标签 -->
  <!-- <router-link :to="path" style="text-decoration: none;"> -->

  <!-- </router-link> -->
  <van-button type="default" :to="path" @click="clickAction" replace>
    <div>
      <i :class="className" class="iconfont"></i>
      <div class="txt">{{title}}</div>
    </div>
  </van-button>
</template>

<script>
  export default {
    name: "TabBarItem",
    props: ['className', 'title', 'path'],
    methods: {
      clickAction() {
        this.$emit("changeIndex", {

        })
      }
    },
  }
</script>

<style scoped lang="less">
  .iconfont {
    font-size: 20px;
    /* no */
  }

  .txt {
    font-size: 12px;
    /* no */
  }

  .normal {
    color: #333;
  }

  .select {
    color: #7dc5eb;
  }

  .van-button {
    background-color: transparent;
    border: 0;
  }
</style>